<script setup>
import { ref, onMounted } from 'vue'
import { List, Sticky } from 'vant'
import commonModel from '@/http/modules/common.js'
const supplierList = ref([])
const loading = ref(false)
const finished = ref(false)
const props = defineProps({
  selectedSupplierObj: {
    type: Object,
    default: () => {},
  },
})
const page = ref(1)
onMounted(() => {
  getList()
})
function getList() {
  finished.value = false
  loading.value = true
  commonModel
    .gatewayApi({
      service: 'cb_supplier_list_query',
      bizContent: {
        pageNo: page.value,
        pageSize: 10,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result && result.dataList && result.dataList.length > 0) {
        if (page.value === 1) {
          supplierList.value = result.dataList
        } else {
          supplierList.value = supplierList.value.concat(result.dataList)
        }
        if (supplierList.value.length >= result.totalCount) {
          finished.value = true
        }
        loading.value = false
      } else {
        finished.value = true
        loading.value = false
      }
    })
}
const loadList = () => {
  page.value++
  getList()
}
const emit = defineEmits(['popupSupplierModal', 'backFillSupplier'])
</script>
<template>
  <div class="supplier_select">
    <Sticky :offset-top="0">
      <div class="supplier_select_top">
        <span class="supplier_select_cancel" @click="emit('popupSupplierModal')"
          >取消</span
        >
        <p class="supplier_select——title">选择供货商</p>
      </div>
    </Sticky>
    <div class="supplier_select_list">
      <List
        style="height: 100%"
        v-model:loading="loading"
        :finished="finished"
        finished-text="加载完毕"
        @load="loadList"
        offset="30"
      >
        <div class="supplier_list">
          <div
            class="supplier_item"
            v-for="i in supplierList"
            :key="i.supplierId"
            @click="emit('backFillSupplier', i)"
          >
            <span
              :style="{
                color:
                  props.selectedSupplierObj.supplierId === i.supplierId
                    ? '#000'
                    : '',
              }"
              >{{ i.supplierMemberName }}</span
            >
            <i
              v-if="props.selectedSupplierObj.supplierId === i.supplierId"
              class="iconfont icon-duigou"
            ></i>
          </div>
        </div>
      </List>
    </div>
  </div>
</template>
<style scoped lang="scss">
.supplier_item {
  display: flex;
  justify-content: space-between;
  font-size: 0.14rem;
  width: 100%;
  height: 0.56rem;
  font-weight: 400;
  color: #999999;
  line-height: 0.56rem;
  margin-bottom: 0.06rem;
  border-bottom: 1px solid #eee;
  i {
    color: #3f84f3;
  }
  span {
    word-break: keep-all;
    overflow: hidden;
    overflow-x: auto;
    .inner-container::-webkit-scrollbar {
      display: none;
    }
  }
}
.supplier_select {
  box-sizing: border-box;
  margin: 0.1rem 0.12rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .supplier_select_top {
    // padding: 0.14rem 0.18rem;
    height: 0.44rem;
    background-color: #ccc;
    top: 0;
    width: 100%;
    z-index: 100;
    font-weight: 500;
    color: #222222;
    font-size: 0.17rem;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .supplier_select_cancel {
      font-weight: 400;
      font-size: 0.15rem;
      color: #222222;
      position: absolute;
      left: 0.14rem;
    }
  }
  .supplier_select_list {
    background-color: #fff;
    margin-top: 0.16rem;
    flex: 1;
    .supplier_select_item {
      font-size: 0.14rem;
      font-weight: 400;
      color: #999999;
      margin-bottom: 0.06rem;
      height: 0.56rem;
      padding: 0.18rem 0.08rem;
    }
  }
}
</style>
